import React, { Component } from 'react'

export default class Count extends Component {
  state = {
    count: 99,
  }

  increment = () => {
    const { value } = this.selectNumber;
    this.props.increment(Number(value));
  }

  decrement = () => {
    const { value } = this.selectNumber;
    this.props.decrement(Number(value));
  }

  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    const { count } = this.props;
    count % 2 === 1 && this.props.increment(Number(value));
  }

  incrementAsync = () => {
    const { value } = this.selectNumber;
    this.props.asyncIncrement(Number(value),500);
  }

  render() {
    // console.log('UI接收', this.props);
    return (
      <div>
        <h1>当前求和为:{this.props.count}</h1>
        <select ref={c => this.selectNumber = c} name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.incrementIfOdd}>当前为奇数加</button>
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}
